<template>
	<div>
		<el-form ref="ruleFormRef" :rules="rules" :model="baseInfoForm" label-width="68px">
			<el-form-item label="头像" prop="avatar">
				<el-upload :show-file-list="false" :limit="1" :http-request="uploadAvatar" accept="image/*">
					<img class="avatar-img" :src="baseInfoForm.headImageUrl ?? ''" />
					<div class="camera-box"><IEpCameraFilled /></div>
				</el-upload>
			</el-form-item>
			<el-form-item label="昵称" prop="nickName">
				<el-input v-model="baseInfoForm.nickName" />
			</el-form-item>
			<el-form-item label="姓名" prop="realName">
				<el-input v-model="baseInfoForm.userName" disabled />
			</el-form-item>
			<!-- <el-form-item label="性别" prop="sex">
				<el-radio-group v-model="baseInfoForm.sex">
					<el-radio :label="0" size="large">男</el-radio>
					<el-radio :label="1" size="large">女</el-radio>
				</el-radio-group>
			</el-form-item> -->
			<!-- <el-form-item label="年龄" prop="age">
				<el-input v-model="baseInfoForm.age" />
			</el-form-item> -->
			<!-- <el-form-item label="邮箱" prop="email">
				<el-input v-model="baseInfoForm.email" />
			</el-form-item> -->
			<el-form-item label="电话" prop="tell">
				<el-input v-model="baseInfoForm.tel" disabled />
			</el-form-item>
			<el-form-item label="地址" prop="addr">
				<el-input v-model="baseInfoForm.address" />
			</el-form-item>
			<!-- <el-form-item label="国籍" prop="countryId">
				<el-cascader v-model="baseInfoForm.countryId" :options="NationalityOptions" :props="props" placeholder="请选择" />
			</el-form-item> -->
			<el-form-item label="国籍" prop="countryId">
				<el-select v-model="baseInfoForm.countryId" placeholder="请选择">
					<el-option v-for="item in countryList" :key="item.id" :label="item.name" :value="item.id" />
				</el-select>
			</el-form-item>
			<el-form-item label="民族" prop="nationId">
				<el-select v-model="baseInfoForm.nationId" placeholder="请选择">
					<el-option v-for="item in nationList" :key="item.id" :label="item.name" :value="item.id" />
				</el-select>
			</el-form-item>
		</el-form>
		<div class="submit">
			<el-button color="#C39F63" @click="submitUserInfo">保存</el-button>
		</div>
	</div>
</template>

<script setup lang="ts" name="BaseInfo">
import type { FormInstance, UploadRequestOptions } from "element-plus";
import { baseCountryList, baseNationList } from "@/service/modules/base";
import { userUpdateBaseInfo } from "@/service/modules/user";
import { useUserStore } from "@/store/user";
import { useCosUpload } from "@/hook/useCosUpLoad";
import { TFormItemRules } from "@/components/interface";
import { IUserInfo } from "@/service/interface/user";
import { IDictI } from "@/service/interface/base";

const { userInfo } = useUserStore();
const baseInfoForm = ref({ ...userInfo });

// 表单字段及验证
const ruleFormRef = ref<FormInstance>();

const rules = ref<TFormItemRules<IUserInfo>>({
	nickName: [{ required: true, message: "请输入昵称", trigger: "blur" }],
	countryId: [{ required: true, message: "请选择国籍", trigger: "blur" }],
	nationId: [{ required: true, message: "请选择民族", trigger: "blur" }]
});

// 上传文件到cos方法
const { cosUpLoadFile } = useCosUpload();

/**
 * 上传图片
 * @param options
 */
const uploadAvatar = async (options: UploadRequestOptions) => {
	baseInfoForm.value.headImageUrl = await cosUpLoadFile({ Body: options.file, Path: `/user/${baseInfoForm.value.tel}/`, FileName: "avatar" });
};

onMounted(() => {
	getNationList();
	getCountryList();
});

// 国家列表
const countryList = ref<IDictI[]>([]);

/**
 * 获取国家列表
 */
const getCountryList = async () => {
	const { data } = await baseCountryList();
	countryList.value = data;
};
/**
 * 民族列表
 */
const nationList = ref<IDictI[]>([]);
/**
 * 获取民族列表
 */
const getNationList = async () => {
	const { data } = await baseNationList();
	nationList.value = data;
};

/**
 * 提交用户信息
 */
const submitUserInfo = async () => {
	await ruleFormRef.value.validate((valid, fields) => {
		if (valid) {
			saveUserInfo();
		} else {
			console.log("error submit!", fields);
		}
	});
};

/**
 *保存用户信息
 */
const saveUserInfo = async () => {
	const { message } = await userUpdateBaseInfo(baseInfoForm.value);
	// 获取 store用户信息方法
	const { actionGetUserInfo } = useUserStore();
	actionGetUserInfo();
	ElMessage.success({ message });
};
</script>

<style scoped lang="scss">
.submit {
	margin-top: 80px;
	margin-bottom: 40px;
	text-align: center;
	.el-button {
		--el-color-black: #ffffff;
	}
}
:deep(.el-form) {
	margin-top: 41px;
	margin-left: 33px;
	.el-form-item {
		margin: 0;
		margin-bottom: 22px;
		&:first-child {
			margin-bottom: 0;
		}
	}
	.el-input {
		width: 380px;
	}
	.el-form-item__label {
		font-weight: 700;
	}
}
:deep(.el-upload) {
	position: relative;
	.avatar-img {
		width: 80px;
		height: 80px;
		background-repeat: no-repeat;
		border-radius: 50%;
		opacity: 0.9;
		object-fit: cover;
	}
	&:hover {
		.camera-box {
			display: flex !important;
		}
	}
	.camera-box {
		position: absolute;
		display: none !important;
		align-items: center;
		justify-content: center;
		width: 80px;
		height: 80px;
		font-size: 24px;
		color: #ffffff;
		background-color: rgba($color: #000000, $alpha: 60%);
		border-radius: 50%;
		transition: all 0.3s linear;
	}
}
.el-radio-group {
	margin: 0;
	margin-top: -3px;
}
</style>
